<template>
	<view class="chat-container">
		<view class="msg-container">
			<!-- https://github.com/wepyjs/wepy-wechat-demo/issues/7 -->
			<scroll-view scroll-y="true" :scroll-into-view="`msg${messages.length - 1}`" :scroll-with-animation="true">
				<view class="msg-list" :id="`msg${index}`" v-for="(msg, index) in messages" :key="msg.time">
					<view class="msg-item">
						<left-bubble v-if="msg.left" :message="msg.text" :avatar-url="logoUrl"></left-bubble>
						<right-bubble v-else :message="msg.text" :avatar-url="logoUrl"></right-bubble>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-input">
			<view class="textarea-container"><textarea auto-height fixed="true" confirm-type="send" v-model="input"
					@confirm="submit" /></view>
			<button style="
					width: 130rpx;
					height: 64rpx;
					line-height: 64rpx;
					margin: 0 10rpx;
					background-color: #ffffff;
					border: 3rpx solid #0256ff;
					color: #0256ff;
				" @click="recognizerShow">
				语音
			</button>
			<button style="
					width: 130rpx;
					height: 64rpx;
					line-height: 64rpx;
					margin: 0 10rpx;
					background-color: #ffffff;
					border: 3rpx solid #0256ff;
					color: #0256ff;
				" @click="submit">
				发送
			</button>
		</view>
	</view>
	<tf-speech-recognizer ref="recognizer" @okClick="recognitionHandler" />
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import leftBubble from './leftBubble.vue';
	import rightBubble from './rightBubble.vue';
	// import { chatGQL } from "@/graphql/me.graphql";
	// import { useMutation } from "villus";
	const logoUrl = ref('https://bkimg.cdn.bcebos.com/pic/f11f3a292df5e0fe9653c7d1526034a85fdf7292');

	const messages = ref([]);
	const input = ref('');

	async function submit() {
		if (input.value === '') return;
		messages.value.push({
			left: false,
			text: input.value,
			time: new Date().getTime()
		});
		// messages.value.push({
		// 	left: false,
		// 	text: input.value,
		// 	time: new Date().getTime(),
		// });
		postAIMsg();
	}
	const postAIMsg = () => {
		uni.request({
			// #ifdef H5
			url: '/api/chat/chatForPlan',
			//	#endif

			//	#ifdef APP-PLUS
			url: 'http://8.138.146.252:8080/ladder/api/chat/chatForPlan',
			//	#endif
			method: 'POST',
			data: {
				messages: [{
					role: 'user',
					content: input.value
				}]
			},
			success(res) {
				console.log('res', res);
				messages.value.push({
					left: true,
					text: res.data.data.answer || '回答不明确',
					time: new Date().getTime()
				});
			}
		});
	};
	const recognizerShow = () => {
		recognizer.value.show();
	};
	const recognizer = ref();
	// 识别结束的回调
	const recognitionHandler = result => {
		console.log('识别结果: ', result);
	};
</script>
<style lang="scss" scoped>
	.chat-container {
		background: #f0f0f0;

		.msg-container {
			padding: 40rpx 10rpx 200rpx 10rpx;
			height: calc(100vh - 240rpx);

			scroll-view {
				height: 100%;
			}
		}

		.bottom-input {
			display: flex;
			align-items: flex-end;
			position: fixed;
			bottom: 0rpx;
			background-color: #fbfbfb;
			padding: 40rpx;
			box-shadow: 0rpx -20rpx 60rpx #eeeeee;

			.textarea-container {
				background-color: #ffffff;
				padding: 20rpx;

				textarea {
					width: calc(100vw - 382rpx);
					background-color: #ffffff;
				}
			}
		}
	}
</style>